<template>
  <a-layout-header class="header" >
    <div  class="flex1">
      <button @click="handleExpand" v-if="!collapsed" class="ksd-absexpand"><MenuFoldOutlined style="font-size:18px;color:#666;"/></button>
      <button @click="handleExpand" v-else class="ksd-absexpand-r"><MenuUnfoldOutlined style="font-size:18px;color:#666;"/></button>
      <button @click="handleReload" class="ml20"><RedoOutlined style="font-size:18px;color:#666;"/></button>
      <button v-if="locale=='zh'" @click="handleChangeLocale('en')" class="ml20"><GlobalOutlined  style="font-size:18px;color:#666;"/></button>
      <button v-if="locale=='en'" @click="handleChangeLocale('zh')" class="ml20"><GlobalOutlined  style="font-size:18px;color:#666;"/></button>
    </div>
    <div class="flex align-items">
      <a-dropdown >
        <a class="ant-dropdown-link flex align-center" @click.prevent>
          <a-avatar :src="userStore.avatar" style="background-color: #87d068" size="small">
            <template #icon>
              <UserOutlined />
            </template>
          </a-avatar>
          <span  class="ml5 fz12">{{userStore.username}}</span>
        </a>
        <template #overlay>
          <a-menu @click="onClick">
            <a-menu-item key="1">角色：超级管理员</a-menu-item>
            <a-menu-item key="2">角色：财务</a-menu-item>
            <a-menu-item key="3">退出登录</a-menu-item>
          </a-menu>
        </template>
      </a-dropdown>
    </div>
  </a-layout-header>
</template>
<script setup>
const emits = defineEmits(["expand"])
const userStore = useStore.userState()
const collapsed = ref(false)
// 国际化处理
const { locale,t, setLocale } = useI18n()
const handleReload = ()=>{
  window.location.reload()
}

const handleChangeLocale = (lang)=>{
  // 把选择的语言进行切换
  locale.value = lang
  setLocale(lang)
  // 切换以后记得把本地缓存进行修改，否则只会生效当前，刷新就还原。
  localStorage.setItem('ksd-kva-language', lang)
}

// 用于读取本地缓存存储的语言是什么？
function initReadLocale() {
  locale.value = localStorage.getItem("ksd-kva-language") || 'zh'
}

const onClick = (data)=>{
  if(data.key == 3){
    if(process.client) {
      Modal.confirm({
        content: '你确定要退出吗？',
        okText:"确定",
        cancelText: '取消',
        onOk() {
          useLogout()
        },
        onCancel() {

        },
      });

    }
  }
}
const handleExpand = ()=>{
  collapsed.value = !collapsed.value
  emits("expand")
}

onMounted(() => {
  initReadLocale();
})
</script>
<style scoped>
.header {
  display: flex;
  position:sticky;
  top:0;
  justify-content: space-between;
  align-content: center;
  align-items: center;
  padding:0 20px;
  background:#fff;
  border:1px solid rgba(5, 5, 5, 0.06);
}

</style>